<template>
  <CommonNav title="课程详情" />
  <commonMain>
    <ClientOnly>
      <CommonLack v-show="!userCourseDetail" />
      <div class="mt-5">
        <div class="card bg-base-100 shadow-xl mb-5">
          <courseCard :course="userCourseDetail.course">
            <div class="flex flex-col gap-1">
              <progress
                class="progress w-full progress-success"
                :value="userCourseDetail.schedule.chapterRatio"
                max="100"
              ></progress>
              <div class="flex justify-between text-xs text-gray-400">
                <span
                  >{{ userCourseDetail.schedule.chapterEnd }}/{{
                    userCourseDetail.schedule.chapterNum
                  }}课程</span
                >
                <span>{{ userCourseDetail.schedule.chapterRatio }}%完成</span>
              </div>
            </div>
            <div class="mt-1 flex">
              <div class="flex gap-2 text-xs text-gray-400">
                <span>学习时长:</span>
                <span>{{ getMinutes(userCourseDetail.studyTime) }}</span>
                <span>最后学习时间:</span>
                <span v-if="userCourseDetail.lastAt">{{
                  getDateTime(userCourseDetail.lastAt)
                }}</span>
                <span v-else>未学习</span>
              </div>
            </div>
          </courseCard>
        </div>
        <chapter
          :chapter="userCourseDetail.courseChapter"
          :isClick="true"
          :lastChapterId="userCourseDetail.lastChapterId"
        />
      </div>
      <template #fallback>
        <div class="flex items-center justify-center p-10">
          <span class="loading loading-spinner loading-lg"></span>
        </div>
      </template>
    </ClientOnly>
  </commonMain>
</template>
<script setup lang="ts">
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import { getUserCourseDetail } from "~/composables/user/course";
import { timeSet } from "~/composables/common/time";

const { getDateTime, getMinutes } = timeSet();
const route = useRoute();
const userCourseId = route.params.id as string;
const userCourseDetail = ref<any | null>(null);
onMounted(async () => {
  userCourseDetail.value = await getUserCourseDetail(userCourseId);
});
</script>
